<template>
  <div class="user">
    <div class="user-nav">
      <el-menu class="user-nav-menu">
        <h2>个人中心</h2>
        <el-menu-item
          :class="{ active: isActive('/user/info') }"
          @click="$router.push('/user/info')"
        >
          <i class="el-icon-s-custom"></i>
          <span slot="title">我的主页</span>
        </el-menu-item>
        <el-menu-item
          :class="{ active: isActive('/user/edit') }"
          @click="$router.push('/user/edit')"
        >
          <i class="el-icon-edit"></i>
          <span slot="title">编辑资料</span>
        </el-menu-item>
        <el-menu-item
          :class="{ active: isActive('/user/post') }"
          @click="$router.push('/user/post')"
        >
          <i class="el-icon-chat-square"></i>
          <span slot="title">帖子信息</span>
        </el-menu-item>
        <el-menu-item
          :class="{ active: isActive('/user/exam') }"
          @click="$router.push('/user/exam')"
        >
          <i class="el-icon-notebook-2"></i>
          <span slot="title">考试记录</span>
        </el-menu-item>
        <el-menu-item
          :class="{ active: isActive('/user/collect') }"
          @click="$router.push('/user/collect')"
        >
          <i class="el-icon-collection"></i>
          <span slot="title">我的收藏</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="user-main">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  name: "UserView",
  methods: {
    isActive(index) {
      return this.$route.path === index;
    },
  },
};
</script>

<style lang="less" scoped>
.user {
  width: 92%;
  height: 100%;
  margin: 0 auto;
  padding: 20px 60px;
  display: flex;
  justify-content: space-around;
  .user-nav {
    width: 20%;
    height: 700px;
    background-color: #fff;
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.15);
    transition: 0.2s;
    &:hover {
      box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.2);
    }
    .user-nav-menu {
      border-radius: 8px;
      overflow: hidden;
      margin-left: 14px;
      h2 {
        margin-top: 14px;
        margin-left: 10px;
        margin-bottom: 8px;
      }
      .active {
        color: #409eff;
        i {
          color: inherit;
        }
      }
    }
  }

  .user-main {
    width: 76%;
    // height: 100%;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
    transition: 0.2s;
    &:hover {
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    }
  }
}
/deep/.el-menu-item:focus,
.el-menu-item:hover {
  background-color: #fff;
}
</style>